<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>09巨幕页头缩略图和警告框组件</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
    </style>
</head>

<body>

    <!-- 巨幕组件主要是展示网站的关键性区域 -->

    <!-- 在固定的范围内  有圆角 -->
    <div class="container">
        <div class="jumbotron">
            <h2>网站标题</h2>
            <p>这是一个学习性的网站</p>
            <p><a href="#" class="btn btn-default">更多内容</a></p>
        </div>
    </div>

    <br/><br/><br/>

    <!-- 100% 全屏 没有圆角 -->
    <div class="jumbotron">
        <div class="container">
            <h2>网站标题</h2>
            <p>这是一个学习性的网站</p>
            <p><a href="#" class="btn btn-default">更多内容</a></p>
        </div>
    </div>

    <br/><br/><br/>

    <!-- 页头组件  增加一些空间 -->
    <div class="page-header">
        <h1>大标题<small>小标题</small></h1>
    </div>

    <!-- 缩略图配合响应式 -->
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-6">
                <!--    thumbnail 给图片缩略图样式 -->
                <div class="thumbnail">
                    <img src="../img/cwt.jpg" alt="">    
                    <div class="caption">
                        <!-- 添加文字段落说明 -->
                        <h3>图片</h3>
                        <p>关于这张图片的详情</p>
                        <p><a href="#" class="btn btn-default">快速进入</a></p>
                    </div>        
                </div>
            </div>  
             <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="../img/cwt.jpg" alt=""> 
                    <div class="caption">
                        <h3>图片</h3>
                        <p>关于这张图片的详情</p>
                        <p><a href="#" class="btn btn-default">快速进入</a></p>
                    </div>           
                </div>
            </div>  
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="../img/cwt.jpg" alt=""> 
                    <div class="caption">
                        <h3>图片</h3>
                        <p>关于这张图片的详情</p>
                        <p><a href="#" class="btn btn-default">快速进入</a></p>
                    </div>           
                </div>
            </div>  
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="thumbnail">
                    <img src="../img/cwt.jpg" alt="">  
                    <div class="caption">
                        <h3>图片</h3>
                        <p>关于这张图片的详情</p>
                        <p><a href="#" class="btn btn-default">快速进入</a></p>
                    </div>          
                </div>
            </div>  
        </div>
    </div>

    <br/> <br/> <br/>

    <!-- 警告框组件 是一组预定义消息 -->
    <div class="alert alert-success" style="margin: 0 100px">
        <!-- 自动适配的超链接 -->
        我是一个成功的警告框! 请下载 <a href="#" class="alert-link">最新版本</a>
        <!-- 关闭样式以及事件 -->
        <button class="close" data-dismiss="alert"><span>&times;</span></button>
    </div>
    
    <br/> <br/> <br/>
    
   

    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
</body>
</html>